<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElButton, ElMessage, ElSelect, ElOption } from 'element-plus'
import api from '@/api'

const { getOrgList, getClassList, downloadClassReport } = api;
const loading = ref(false)
const orgList = ref([])
const classList = ref([])
const orgId = ref('')
const classId = ref('')
const pageLoad = async () => {
    const res = await getOrgList();
    if (res.data) {
        orgList.value = res.data;
    }
}
pageLoad();
const downloadReport = async () => {
    if (!orgId.value) {
        ElMessage.success('请选择机构!')
        return;
    }
    if (!classId.value) {
        ElMessage.success('请选择班级!')
        return;
    }
    loading.value = true
    const res = await downloadClassReport({ classId: classId.value }).finally((res) => {
        loading.value = false
    })
    if (res.data) ElMessage.success('下载报告成功')
}
const handleOrgChange = async (val) => {
    orgId.value = val
    await getClassList({ orgId: val }).then(res => {
        classList.value = res.data
    })
}
const handleClassChange = (val) => {
    classId.value = val
}
</script>
<template>
    <div style="display: flex;flex-direction: column;gap:20px">
        <div style="display: flex;gap:20px;align-items: center;">
            <ElSelect placeholder="请选择机构" style="width: 200px;" @change="handleOrgChange" v-model="orgId">
                <ElOption v-for="(item, index) in orgList" :key="index" :label="item.name" :value="item.id" />
            </ElSelect>
            <ElSelect placeholder="请选择机构" style="width: 200px;" @change="handleClassChange" v-model="classId">
                <ElOption v-for="(item, index) in classList" :key="index" :label="item.name" :value="item.id" />
            </ElSelect>
        </div>
        <ElButton style="width: 200px;" type="success" :loading="importLoading" @click="downloadReport">下载报告</ElButton>
    </div>
</template>